<ion-header>
  <ion-toolbar class="orange-bar">
    <ion-buttons slot="start">
      <ion-button color="light" (click)="goBack()">
        <ion-icon name="ios-arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>我的借款</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
        pullingText="下拉刷新"
        refreshingText="加载中...">
    </ion-refresher-content>
  </ion-refresher>

  <ion-list *ngIf="dataList && dataList.length > 0;else nullBlock">
    <ion-item detail *ngFor="let data of dataList" (click)="pushDetail(data)">
      <ion-label>
        <div class="first-row">
          <span>{{data['title']}}({{data['bidNo']}})</span>
          <ion-text color="tertiary" float-right>{{data.amount | tenThousand}}元</ion-text>
        </div>
        <div class="second-row">
          <ion-text color="medium">期限 {{data['period']}}{{data['periodUnit']}}</ion-text>
          <ion-text color="medium" float-right>{{data['statusStr']}}</ion-text>
        </div>
      </ion-label>
    </ion-item>
  </ion-list>
  <ng-template #nullBlock>
    <ion-list>
      <ion-item><ion-label>暂无相关内容</ion-label></ion-item>
    </ion-list>
  </ng-template>

  <ion-infinite-scroll #infiniteScroll threshold="50px" (ionInfinite)="loadMoreData($event)">
    <ion-infinite-scroll-content
        loadingText="加载中...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>
